<template>
    <div class="myInfo-style">
        <div class="myInfo-left">
            <div class="title-style">日完成值/日目标值</div>
            <div class="progressBar-wrap" v-for="(item, i) in dayArr" :key="i">
                <div class="name-style">{{item.name}}</div>
                <div class="progressBar-style">
                    <progressBar :progress="item.percent" backgroundColor="rgba(11,130,255)"></progressBar>
                </div>
                <div class="num-style">{{item.real}}/{{item.target}}</div>
            </div>
        </div>
        <div class="myInfo-right">
            <div class="title-style">月度完成值/月度目标值</div>
            <div class="progressBar-wrap" v-for="(item, i) in dayArr" :key="i">
                <div class="progressBar-style">
                    <progressBar :progress="item.percent" backgroundColor="rgba(10,231,190)"></progressBar>
                </div>
                <div class="num-style">{{item.real}}/{{item.target}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    import progressBar from "@/components/progressBar";
    export default {
        name: "myInfo",
        props: {
            getData: {
                type: Object,
                default: () => {}
            }
        },
        components: {
            progressBar
        },
        data() {
            return {
                dayArr: [
                    {
                        name: '产品A',
                        percent: 80,
                        target: 12,
                        real: 10
                    },
                    {
                        name: '产品B',
                        percent: 60,
                        target: 10,
                        real: 6
                    },
                    {
                        name: '产品C',
                        percent: 50,
                        target: 3,
                        real: 2
                    },
                    {
                        name: '产品D',
                        percent: 40,
                        target: 22,
                        real: 10
                    },
                    {
                        name: '产品E',
                        percent: 30,
                        target: 122,
                        real: 100
                    }
                ]
            }
        }
    }
</script>

<style scoped lang="less">
.myInfo-style {
    position: absolute;
    top: 35px;
    width: 780px;
    height: 315px;
    overflow: hidden;
    //background: rgba(77, 179, 255, 0.2);
    .myInfo-left {
        position: absolute;
        left: 20px;
        width: 390px;
        overflow: hidden;
        .title-style {
            position: relative;
            width: 100%;
            font-size: 14px;
            text-align: left;
            //background: #4db3ff;
            height: 80px;
            line-height: 80px;
            color: #999;
            padding-left: 96px;
        }
        .progressBar-wrap {
            position: relative;
            //background: #11b95c;
            width: 100%;
            height: 20px;
            font-size: 14px;
            overflow: hidden;
            margin-bottom: 25px;
            .name-style {
                box-sizing: border-box;
                position: relative;
                float: left;
                width: 25%;
                height: 20px;
                line-height: 20px;
                padding-left: 20px;
            }
            .progressBar-style {
                box-sizing: border-box;
                position: relative;
                float: left;
                width: 55%;
                height: 20px;
            }
            .num-style {
                box-sizing: border-box;
                position: relative;
                float: left;
                width: 20%;
                height: 20px;
                line-height: 20px;
                padding-left: 5px;   
            }
        }
    }
    .myInfo-right {
        position: absolute;
        left: 440px;
        width: 390px;
        overflow: hidden;
        .title-style {
            box-sizing: border-box;
            position: relative;
            width: 100%;
            // padding-left: 30px;
            font-size: 14px;
            //background: #4db3ff;
            height: 80px;
            line-height: 80px;
            color: #999;
        }
        .progressBar-wrap {
            position: relative;
            //background: #11b95c;
            width: 100%;
            height: 20px;
            font-size: 14px;
            overflow: hidden;
            margin-bottom: 25px;
            .name-style {
                box-sizing: border-box;
                position: relative;
                float: left;
                width: 25%;
                height: 20px;
                line-height: 20px;
                padding-left: 20px;
            }
            .progressBar-style {
                box-sizing: border-box;
                position: relative;
                float: left;
                width: 55%;
                height: 20px;
            }
            .num-style {
                box-sizing: border-box;
                position: relative;
                float: left;
                width: 20%;
                height: 20px;
                line-height: 20px;
                padding-left: 5px;   
            }
        }
    }
}
</style>
